<script setup>
import { toRefs } from 'vue'
/* 页码 */
const modelValue = defineModel({type: Number, default: 1})
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  pageSize: {
    type: Number,
    default: 10
  },
  pageSizes: {
    type: Array,
    default: () => ([10, 20, 40, 60, 80, 100])
  },
  showPage: { // 是否显示页码
    type: Boolean,
    default: true
  },
  showRefresh: { // 是否显示刷新按钮
    type: Boolean,
    default: true
  }
})
const {pageSize, pageSizes, total} = toRefs(props)
const emit = defineEmits(['reload-table', 'update:pageSize'])
const handleSizeChange = (size) => {
  emit('update:pageSize', size)
  emit('reload-table')
}
const handleCurrentChange = (num) => {
  emit('update:modelValue', num)
  emit('reload-table')
}
// 刷新
const refresh =()=>{
  emit('update:modelValue', 1)
  emit('reload-table')
}
</script>
<template>
  <div class="table-view">
    <header class="table-view__header" v-if="$slots.header||$slots.headerRight">
      <slot name="header"/>
      <div class="table-view__header-right" v-if="$slots.headerRight">
        <slot name="headerRight"/>
        <ElTooltip
            effect="dark"
            content="刷新"
            placement="top-start"
        >
          <ElButton v-if="showRefresh" class="fr mr-1" @click="emit('reload-table')" circle><ElIcon><Refresh /></ElIcon></ElButton>
        </ElTooltip>
      </div>
    </header>
    <div class="table-view__body">
      <slot/>
    </div>
    <slot name="footer">
      <div class="pagination-body table-view__footer" v-if='showPage'>
        <ElPagination
            :current-page="modelValue"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </slot>
  </div>
</template>

<style lang="scss">
.table-view {
  @include flex-column;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--tabsbar-height);

  .table-view__header {
    padding-top: 14px;
  }

  .table-view__header-right {
    margin-bottom: 10px;
    padding-left: 14px;
  }

  .table-view__body {
    @include flex-1;
    height: 0;

    > .el-table {
      height: 100%;
    }
  }

  .table-view__footer {
    .el-pagination {
      padding: 15px;
      text-align: center;
      background: #fff;

      .el-pagination {
        justify-content: center;
      }
    }

    .is-background {
      background-color: #fff;
    }
  }
}
</style>
